import { useEffect, useState } from "react"
import { useSelector, useDispatch, IRouteComponentProps } from 'umi'
import { Breadcrumb, Form, Input, Button, Select, Table, Pagination, ConfigProvider ,message} from 'antd';
const { Option } = Select;
import styles from "./user.less"
import zhCN from 'antd/es/locale/zh_CN';


const columns = [
    {
        title: '账户',
        dataIndex: 'url',
        width: 200,
        render: (row: any) => {
            return <a>{row}</a>
        }
    },
    {
        title: '邮箱',
        dataIndex: 'ip',
        width: 150,
    },
    {
        title: '角色',
        dataIndex: 'browser',
        width: 150,
    },
    {
        title: '状态',
        dataIndex: 'engine',
        width: 150,
    },
    {
        title: '注册日期',
        dataIndex: 'os',
        width: 150,
    },
    {
        title: '操作',
        dataIndex: 'device',
        width: 100,
    },

];


const View: React.FC<IRouteComponentProps> = () => {
    const [page, setPage] = useState(1)
    const [size, setSize] = useState(12)

    const state = useSelector((state: { user: any }) => state.user)
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch({
            type: "view/user",
            payload: {
                page,
                size
            }
        })

        if(!state.userList){
            message.info('无访问权限');
        }
    }, [])

    useEffect(() => {
        dispatch({
            type: "view/user",
            payload: {
                page, size
            }
        })
    }, [page, size])


    const [form] = Form.useForm();

    const onFinish = (values: any) => {
        dispatch({
            type: "view/userSearch",
            payload: {
                values
            }
        })
    };

    const onReset = () => {
        form.resetFields();
    };

    // 全选反选
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const onSelectChange = (selectedRowKeys: any) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        setSelectedRowKeys(selectedRowKeys)
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: [
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
            {
                key: 'odd',
                text: 'Select Odd Row',
                onSelect: (changableRowKeys: any) => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changableRowKeys.filter((key: any, index: number) => {
                        if (index % 2 !== 0) {
                            return false;
                        }
                        return true;
                    });
                    setSelectedRowKeys(newSelectedRowKeys)
                },
            },
            {
                key: 'even',
                text: 'Select Even Row',
                onSelect: (changableRowKeys: any) => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changableRowKeys.filter((key: any, index: number) => {
                        if (index % 2 !== 0) {
                            return true;
                        }
                        return false;
                    });
                    setSelectedRowKeys(newSelectedRowKeys)
                },
            },
        ],
    };

    const onGenderChange = (value: string) => {
        switch (value) {
            case 'male':
                form.setFieldsValue({ note: 'Hi, man!' });
                return;
            case 'female':
                form.setFieldsValue({ note: 'Hi, lady!' });
                return;
            case 'other':
                form.setFieldsValue({ note: 'Hi there!' });
        }
    };

    return <div className={styles.view}>
        <div>
            <div className={styles.bread}>
                <Breadcrumb>
                    <Breadcrumb.Item>工作台</Breadcrumb.Item>
                    <Breadcrumb.Item>用户统计</Breadcrumb.Item>
                </Breadcrumb>
            </div>
        </div>
        <div>
            <div className={styles.form}>
                <Form form={form} name="control-hooks" onFinish={onFinish} labelAlign="right">

                    <Form.Item name="name" label="账户" >
                        <Input placeholder="请输入IP" />
                    </Form.Item>

                    <Form.Item name="email" label="邮箱">
                        <Input placeholder="请输入UA" />
                    </Form.Item>

                    <Form.Item name="role" label="角色">
                        <Select
                            onChange={onGenderChange}
                            allowClear
                        >
                            <Option value="admin">管理员</Option>
                            <Option value="visitor">访客</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item name="status" label="状态">
                        <Select
                            onChange={onGenderChange}
                            allowClear
                        >
                            <Option value="locked">锁定</Option>
                            <Option value="active">可用</Option>
                        </Select>
                    </Form.Item>

                    <div className={styles.btn}>
                        <Form.Item >
                            <Button type="primary" htmlType="submit">
                                搜索
                            </Button>
                            <Button htmlType="button" onClick={onReset}>
                                重置
                            </Button>
                        </Form.Item></div>

                </Form>
            </div>
            <div className={styles.table}>
                <div>
                    <Table
                        rowKey="id"
                        dataSource={state.userList}
                        columns={columns as any}
                        rowSelection={rowSelection}
                        scroll={{ x: 'calc(700px + 50%)' }}
                        pagination={false} />
                    <div className={styles.page}>
                        <ConfigProvider locale={zhCN}>
                            <Pagination
                                style={{ float: "right", fontSize: "15px" }}
                                total={state.viewLength}
                                showTotal={total => `共${total}条`}
                                onChange={(e) => { setPage(e) }}
                                defaultPageSize={20}
                                defaultCurrent={1}
                                onShowSizeChange={(current, size) => { setSize(size) }}
                            />
                        </ConfigProvider>
                    </div>
                </div>
            </div>
        </div>

    </div>


}
export default View